<template>
	<view class="like">
		<navBar title="我的博客"></navBar>
		<view class="mylike">
			<view class="my" v-for="item in myList" :key="item.id" @click="jump(item.id)">
				<view class="likeImg">
					<image :src="item.cover"></image>
				</view>
				<view class="likeTxt">
					<view class="name">{{item.title}}</view>
					<view class="classify">{{item.BlogClassifies[0].classifyName}}</view>
					<view class="detail">
						<u-icon name="heart" color="#f3c3a2"></u-icon>{{item.like_count}}
						<u-icon name="chat" color="#f3c3a2"></u-icon>{{item.comment_count}}
						<u-icon name="eye" color="#f3c3a2"></u-icon>{{item.read_count}}
					</view>
					<view class="itc">{{$u.timeFormat(new Date(	item.createdAt), 'yyyy年mm月dd日')}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		myBlog
	} from '@/config/api.js'

	export default {
		data() {
			return {
				myList: []
			};
		},
		async onShow() {
			const like = await myBlog(this.userInfo.token)
			this.myList = like.data.rows
			console.log(this.myList);
		},
		methods:{
			jump(ID){
				uni.navigateTo({
					url:'/subpages/detail/detail?id='+ ID
					})
			}
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss" scoped>
	.like {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 4vw;
		background-color: #eee;

		.mylike {
			padding: 3vw;
			font-size: 10px;
			box-sizing: border-box;
			width: 100%;
			background-color: #fff;
			border-radius: 3vw;
			display: flex;
			flex-direction: column;

			.my {
				padding: 2vw 0;
				height: 24vw;
				border-bottom: 0.5vw #eee solid;
				display: flex;
				align-items: center;

				.likeImg {
					height: 20vw;
					width: 25vw;
					border-radius: 2vw;
					overflow: hidden;
					border: #eee 1.2vw solid;
					image {
						width: 100%;
						height: 100%;
					}
				}

				.likeTxt {
					height: 100%;
					margin-left: 3.5vw;

					.name {
						font-size: 15px;
						height: 6vw;
					}

					.classify {
						color: #ffffff;
						font-weight: 500;
						background-color: #ffc123;
						border-radius: 1.5vw;
						text-align: center;
						height: 5vw;
						width: 17vw;
						padding: 0 2vw;
						box-sizing: border-box;
					}

					.detail {
						display: flex;
						font-size: 14px;
						color: #818181;
					}

					.itc {
						font-size: 14px;
						color: #818181;
					}
				}
			}
		}
	}
</style>
